<script lang="ts" setup>
import API from '@/services';
import { IconDelete, IconMinusCircleFill } from '@arco-design/web-vue/es/icon';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import * as RouteNames from '@/router/consts';

// 居然可以这样？
const props = withDefaults(
  defineProps<{
    modelValue: any;
    fieldPath: string;
    tableDisabled: boolean;
    disableRemove: boolean;
    tableLeftOptions: any[];
    tableRightOptions: any[];
    isSaveTableId?: boolean;
  }>(),
  {
    tableDisabled: false,
    disableRemove: false,
    isSaveTableId: false
  }
);
const emit = defineEmits(['remove', 'handleParent']);
// const tableLeftOptions = ref(props.tableLeftOptions)
const tableLeftFieldOptions = ref<any[]>([]);
const tableRightFieldOptions = ref<any[]>([]);
const getTableFieldOptions = async (tableId: number) => {
  try {
    const res = await API.dataTable.getDataTableGetTableFieldById({
      id: tableId
    });
    if (res.data?.length) {
      const d = res.data.map((item) => ({
        label: item.tableFieldName,
        value: item.tableFieldName
      }));
      return d;
    }
    return [];
  } catch (error) {
    return [];
  }
};
const route = useRoute();
const itemIndex = ref(0);
// 监听 左侧表格
watch(
  () => props.modelValue.tableId,
  async () => {
    console.log(route.name, '此时路由名');
    if (props.modelValue.tableId) {
      const data = await getTableFieldOptions(props.modelValue.tableId);
      tableLeftFieldOptions.value = data;
    }
  },
  {
    immediate: true
  }
);
watch(
  () => props.modelValue.tableId,
  () => {
    props.modelValue.tableField = undefined;
  }
);
watch(
  () => props.modelValue.joinTableId,
  async () => {
    if (props.modelValue.joinTableId) {
      const data = await getTableFieldOptions(props.modelValue.joinTableId);
      tableRightFieldOptions.value = data;
    }
  },
  {
    immediate: true
  }
);
watch(
  () => props.modelValue.joinTableId,
  () => {
    props.modelValue.joinTableField = undefined;
  }
);
watch(
  () => props.fieldPath,
  () => {
    let fieldPathArr = props.fieldPath.split('.');
    itemIndex.value = Number(fieldPathArr[1]) + 1;
  },
  {
    immediate: true
  }
);

// 改变左边的表(只用于场景管理的逻辑)
const changeLeftTable = (val: any, fieldPath: string) => {
  let fieldPathArr = fieldPath.split('.');
  if (fieldPathArr[1] == '0' && props.isSaveTableId) {
    emit('handleParent', val);
  }
};
</script>
<template>
  <div class="join-wrap">
    <div
      class="onIndex"
      v-if="route.name === RouteNames.ROUTE_INDEXSCENESMANAGE"
    >
      #{{ itemIndex }}
    </div>
    <div class="join-wrap-left">
      <a-row :gutter="8">
        <a-col :span="10">
          <a-form-item
            hide-asterisk
            hide-label
            required
            :field="`${fieldPath}.tableId`"
            :rules="[{ required: true, message: '请选择' }]"
          >
            <a-select
              v-model="props.modelValue.tableId"
              :options="props.tableLeftOptions"
              :disabled="props.tableDisabled"
              @change="changeLeftTable(props.modelValue.tableId, fieldPath)"
              allow-search
            >
              <template #arrow-icon>
                <IconDown class="arco-select-arrow-icon" />
              </template>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4" class="join-wrap-left-center">left join</a-col>
        <a-col :span="10">
          <a-form-item
            hide-asterisk
            hide-label
            required
            :field="`${fieldPath}.joinTableId`"
            :rules="[{ required: true, message: '请选择' }]"
          >
            <a-select
              v-model="props.modelValue.joinTableId"
              :options="props.tableRightOptions"
              allow-search
            >
              <template #arrow-icon>
                <IconDown class="arco-select-arrow-icon" />
              </template>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <div class="ontext">on</div>
      <a-row :gutter="8">
        <a-col :span="10">
          <a-form-item
            hide-asterisk
            hide-label
            required
            :field="`${fieldPath}.tableField`"
            :rules="[{ required: true, message: '请选择' }]"
          >
            <a-select
              v-model="props.modelValue.tableField"
              :options="tableLeftFieldOptions"
              allow-search
            >
              <template #arrow-icon>
                <IconDown class="arco-select-arrow-icon" />
              </template>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4" class="join-wrap-left-center"> = </a-col>
        <a-col :span="10">
          <a-form-item
            hide-asterisk
            hide-label
            required
            :field="`${fieldPath}.joinTableField`"
            :rules="[{ required: true, message: '请选择' }]"
          >
            <a-select
              v-model="props.modelValue.joinTableField"
              :options="tableRightFieldOptions"
              allow-search
            >
              <template #arrow-icon>
                <IconDown class="arco-select-arrow-icon" />
              </template>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </div>
    <div class="join-wrap-right">
      <IconDelete
        style="color: #9b9fab; cursor: pointer"
        size="16"
        v-if="
          !props.disableRemove &&
          route.name !== RouteNames.ROUTE_INDEXSCENESMANAGE
        "
        @click="
          () => {
            emit('remove');
          }
        "
      />
      <IconMinusCircleFill
        style="color: #ff1a3b; cursor: pointer; font-size: 18px"
        @click="
          () => {
            emit('remove');
          }
        "
        v-if="
          !props.disableRemove &&
          route.name === RouteNames.ROUTE_INDEXSCENESMANAGE
        "
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.join-wrap {
  padding: 12px 12px 12px 12px;
  background-color: #f6f8fc;
  border-radius: 3px;
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  ::v-deep(.arco-form-item) {
    margin-bottom: 0;
  }
  .onIndex {
    padding: 0 27px 0 15px;
  }
  &-left {
    flex: 1;
    &-center {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 6px;
      padding-bottom: 6px;
      font-size: 14px;
      line-height: 1.5715;
      color: #60646f;
    }
  }
  &-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 12px;
  }
  .ontext {
    padding: 0;
    margin: 0;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    margin: 3px 0;
    color: #60646f;
  }
}
</style>
